﻿<template>
	<div class="wrapper">
				
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">商品管理</h1>
				</section>
			</div>
		</header>
				
				<!-- 商家logo部分 -->
				<div class="business-logo">
					<img :src="getImg(business.businessImg)">
				</div>
			<div class="business-info">
				<h1>{{business.businessName}}</h1>
				<p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
				<p>{{business.businessExplain}}</p>
			</div>

				<div class="add-food-button">
					<button @click="tocreate(businessId)">新建商品</button>
				</div>
				<ul class="food">
					<li v-for="item in foodArr" :key="item.foodId">
						<div class="food-left">
							<img :src="getImg(item.foodImg)" @error="handleImageError">
							<div class="food-left-info">
								<h3>{{item.foodName}}</h3>
								<p>{{item.foodExplain}}</p>
								<p>&#165;{{item.foodPrice}}</p>
							</div>
						</div>
						<div class="food-right">
							<button class="fooddelete" @click="todelete(item.foodId)">删除</button>
							<button class="foodchange" @click="tochange(item.foodId)">编辑</button>
						</div>
					</li>
				</ul>
	</div>
</template>

<script>
	import BackButton from '../components/BackButton.vue';
	export default{
		name:'BusinessControl',
		data(){
			return {
				businessId: this.$route.query.businessId,
			business:{},
			foodArr:[],
			user:{},
			isCartExpanded: false, // 购物车是否展开
			selectedItems: [],     // 已选商品
		}
		},
		
		created() {
			this.user = this.$getSessionStorage('user');
			console.log(this.user);
			//根据businessId查询商家信息
			this.$axios.post('BusinessController/getBusinessById',this.$qs.stringify({
				businessId:this.user.userId
			})).then(response=>{
				this.business = response.data;
			}).catch(error=>{
				console.error(error);
			});
			
			//根据businessId查询所属食品信�?
			this.$axios.post('FoodController/listFoodByBusinessId',this.$qs.stringify({
				businessId:this.user.userId
			})).then(response=>{
				this.foodArr = response.data;
			}).catch(error=>{
				console.error(error);
			});
		},
		components:{
			BackButton
		},
		methods:{
		getImg(path){
			if(!path) return this.getDefaultImage();
			// 如果是完整的HTTP URL，直接返回
			if(path.startsWith('http')) return path;
			// 如果是 base64 格式，直接返回
			if(path.startsWith('data:image')) return path;
			// 如果是相对路径（以/开头），拼接服务器地址
			if(path.startsWith('/')) {
				// 如果已经是 /img/ 开头，直接拼接
				if(path.startsWith('/img/')) {
					return 'http://localhost:8888' + path;
				}
				// 如果是其他路径（如 /2024-10-26/xxx.jpg），需要添加 /img 前缀
				return 'http://localhost:8888/img' + path;
			}
			// 其他情况，添加服务器前缀和路径分隔符
			return 'http://localhost:8888/img/' + path;
		},
		getDefaultImage(){
			// 返回一个包含食物emoji的SVG图片
			const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#f5f5f5" rx="10"/><text x="100" y="100" font-size="80" text-anchor="middle" dominant-baseline="central">🍱</text></svg>';
			return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
		},
		handleImageError(event){
			event.target.src = this.getDefaultImage();
		},
			todelete(foodId){
				this.$axios.post('FoodController/delFoodById',this.$qs.stringify({
					foodId: foodId,
					businessId:this.user.userId
				})).then(response=>{
				if(response.data.code=='200'){
					alert("删除成功!");
				}else{
					alert("删除失败");
				}
				window.location.reload(true);
				}).catch(error=>{
					console.error(error);
				});
			},
			tochange(foodId){
				this.$router.push({path:'/foodChange',query:{foodId:foodId}});
			},
			tocreate(businessId){
				this.$router.push({path:'/foodCreate',query:{businessId:businessId}});
			}

		},
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
	}
	.content {
		flex: 1;
		padding-bottom: 14vw; /*设置为 footer 高度相同的底部内边距 */
	}
	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}
	
	.wrapper .business-logo{
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper .business-logo img{
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}
	.wrapper .business-info{
		width: 100%;
		height: 20vw;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wrapper .business-info h1{
		font-size: 5vw;
	}
	.wrapper .business-info p{
		font-size: 3vw;
		color: #666;
		margin-top: 1vw;
	}
	.add-food-button {
		margin-top: 12vw; /* 在 header 下面留出空间 */
		padding: 1vw;
		display: flex;
		justify-content: center;
	}
	
	.add-food-button button {
		padding: 1vw 2vw;
		font-size: 4vw;
		background-color: #0097FF;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	.wrapper .food{
		width: 100%;
		/*使用下外边距避开footer部分*/
		margin-bottom: 14vw;
		padding-bottom: 6vw;
	}
	.wrapper .food li{
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .food li .food-left{
		display: flex;
		align-items: center;
	}
	.wrapper .food li .food-left img{
		width: 20vw;
		height: 20vw;
	}
	.wrapper .food li .food-left .food-left-info{
		margin-left: 3vw;
	}
	.wrapper .food li .food-left .food-left-info h3{
		font-size: 3.8vw;
		color: #555;
	}
	.wrapper .food li .food-left .food-left-info p{
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
	.wrapper .food li .food-right{
		width: 16vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .food li .food-right .fa-minus-circle{
		font-size: 5.5vw;
		color: #999;
		cursor: pointer;
	}
	.wrapper .food li .food-right p{
		font-size: 3.6vw;
		color: #333;
	}
	.wrapper .food li .food-right .fa-plus-circle{
		font-size: 5.5vw;
		color: #0097EF;
		cursor: pointer;
	}
	.fooddelete {
		width: 10vw;
		height: 5vw;
		margin: 0 auto;
		font-size: 3vw;
		background-color: #0097FF;
		border: 1px solid;
		text-align: center;
	}
	.foodchange {
		width: 10vw;
		height: 5vw;
		margin: 0 auto;
		font-size: 3vw;
		background-color: #0097FF;
		border: 1px solid;
		text-align: center;
	}
	/*
	.wrapper .cart .cart-right .cart-right-item{
		width: 100%;
		height: 100%;
		background-color: #535356;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	*/
</style>
